var __layoutConfig={
	version:'V1.12-dom',
	//加载布局之后再显示布局，否则可能会显示布局前的布局
	afterLoadedShow:true,
	//加载布局(Vue)前对应dom元素的样式(当afterLoadedShow为true时生效)
	registerCSS:`
		hiv{
			display:flex;
			flex-direction:row;
		}
		viv{
			display:flex;
			flex-direction:column;
		}
		rhiv{
			display:flex;
			flex-direction:row-reverse;
		}
		rviv{
			display:flex;
			flex-direction:column-reverse;
		}
		block{
			flex-shrink:0;
		}
		pow{
			width:100%;
			height:100%;
			flex:1;
		}
		wiv{
			display:flex;
			flex-wrap:wrap;
			justify-content:space-between;
			align-items:space-between;
		}
		rwiv{
			display:flex;
			flex-wrap:wrap-reverse;
			justify-content:space-between;
			align-items:space-between;
		}
	`,
	define:{
		'pow':{
			props:{
				flex:`
					This.style['flex']=This.getAttribute("flex");
				`
			},
			handle:`
				if(This.parentNode.tagName=="VIV"||This.parentNode.tagName=="RVIV"){
					This.style.width="0%";
					This.style.height="100%";
				}
				else if(This.parentNode.tagName=="HIV"||This.parentNode.tagName=="RHIV"){
					This.style.height="0%";
					This.style.width="100%";
				}
				if(!__layouthasClass(This,"_pow"))This.className +=(" _pow ");
			`
		},
		'block':{
			props:{
				length:`
					if(This.parentNode.tagName=="HIV"||This.parentNode.tagName=="RHIV")
						This.style['width']=This.getAttribute("length");
					else if(This.parentNode.tagName=="VIV"||This.parentNode.tagName=="RVIV")
						This.style['height']=This.getAttribute("length");
				`
			},
			handle:`
				if(!__layouthasClass(This,"_block"))This.className +=(" _block ");
			`
		},
		'hiv':{
			props:{
				vmode:`
					This.style['align-items']=__getOrDefault(__flexMapper,This.getAttribute("vmode"));
				`,
				hmode:`
					This.style['justify-content']=__getOrDefault(__flexMapper,This.getAttribute("hmode"));
				`,
				wmode:`
					This.style['align-content']=__getOrDefault(__flexMapper,This.getAttribute("wmode"));
				`,
				wrap:`
					This.style['flex-wrap']=__getWrap(This.hasAttribute("wrap"),This.hasAttribute("rwrap"));
				`,
				rwrap:`
					This.style['flex-wrap']=__getWrap(This.hasAttribute("wrap"),This.hasAttribute("rwrap"));
				`
			},
			handle:`if(!__layouthasClass(This,"_hiv"))This.className +=(" _hiv ");`
		},
		'viv':{
			props:{
				vmode:`
					This.style['align-items']=__getOrDefault(__flexMapper,This.getAttribute("vmode"));
				`,
				hmode:`
					This.style['justify-content']=__getOrDefault(__flexMapper,This.getAttribute("hmode"));
				`,
				wmode:`
					This.style['align-content']=__getOrDefault(__flexMapper,This.getAttribute("wmode"));
				`,
				wrap:`
					This.style['flex-wrap']=__getWrap(This.hasAttribute("wrap"),This.hasAttribute("rwrap"));
				`,
				rwrap:`
					This.style['flex-wrap']=__getWrap(This.hasAttribute("wrap"),This.hasAttribute("rwrap"));
				`
			},
			handle:`if(!__layouthasClass(This,"_viv"))This.className +=(" _viv ");`
		},
		'rhiv':{
			props:{
				vmode:`
					This.style['align-items']=__getOrDefault(__flexMapper,This.getAttribute("vmode"));
				`,
				hmode:`
					This.style['justify-content']=__getOrDefault(__flexMapper,This.getAttribute("hmode"));
				`,
				wmode:`
					This.style['align-content']=__getOrDefault(__flexMapper,This.getAttribute("wmode"));
				`,
				wrap:`
					This.style['flex-wrap']=__getWrap(This.hasAttribute("wrap"),This.hasAttribute("rwrap"));
				`,
				rwrap:`
					This.style['flex-wrap']=__getWrap(This.hasAttribute("wrap"),This.hasAttribute("rwrap"));
				`
			},
			handle:`if(!__layouthasClass(This,"_rhiv"))This.className +=(" _rhiv ");`
		},
		'rviv':{
			props:{
				vmode:`
					This.style['align-items']=__getOrDefault(__flexMapper,This.getAttribute("vmode"));
				`,
				hmode:`
					This.style['justify-content']=__getOrDefault(__flexMapper,This.getAttribute("hmode"));
				`,
				wmode:`
					This.style['align-content']=__getOrDefault(__flexMapper,This.getAttribute("wmode"));
				`,
				wrap:`
					This.style['flex-wrap']=__getWrap(This.hasAttribute("wrap"),This.hasAttribute("rwrap"));
				`,
				rwrap:`
					This.style['flex-wrap']=__getWrap(This.hasAttribute("wrap"),This.hasAttribute("rwrap"));
				`
			},
			handle:`if(!__layouthasClass(This,"_rviv"))if(This)This.className +=(" _rviv ");`
		},
		'wiv':{
			props:{
				vmode:`
					This.style['align-items']=__getOrDefault(__flexMapper,This.getAttribute("vmode"));
				`,
				hmode:`
					This.style['justify-content']=__getOrDefault(__flexMapper,This.getAttribute("hmode"));
				`,
				direction:`
					This.style['flex-direction']=This.getAttribute("direction");
				`
			},
			handle:`if(!__layouthasClass(This,"_wiv"))This.className +=(" _wiv ");`
		},
		'rwiv':{
			props:{
				vmode:`
					This.style['align-items']=__getOrDefault(__flexMapper,This.getAttribute("vmode"));
				`,
				hmode:`
					This.style['justify-content']=__getOrDefault(__flexMapper,This.getAttribute("hmode"));
				`,
				direction:`
					This.style['flex-direction']=This.getAttribute("direction");
				`
			},
			handle:`if(!__layouthasClass(This,"_rwiv"))This.className +=(" _rwiv ");`
		}
	}
};
function __layouthasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
var __flexMapper = {
	"start":"flex-start",
	"end":"flex-end",
	"center":"center",
	"evenly":"space-evenly",
	"around":"space-around",
	"between":"space-between"
}
function __getOrDefault(mapper,value){
	if(mapper[value]==null)
		return value;
	else return mapper[value];
}
function __getWrap(wrap,rwrap){
	if(wrap)
		return 'wrap';
	else if(rwrap)
		return 'wrap-reverse';
	else 'nowrap';
}
function __initLayoutCSS(config){
	if(__layoutConfig.afterLoadedShow){
		var style=`<style>${__layoutConfig.registerCSS}</style>`;
		var ele=document.createElement('div');
		ele.innerHTML=style;
		document.getElementsByTagName('head')[0].appendChild(ele.firstElementChild)
	}
}
//布局dom属性改变响应
function __initDomSetting(config,This,tag){
	for(var j in config.define[tag].props){
		if(This.hasAttribute(j)!=null){
			var value=This.getAttribute(j);
			eval(config.define[tag].props[j]);
		}
	}
	eval(config.define[tag].handle);
}
//单个布局dom元素监控
function __observeLayoutDom(config,This,tag){
	//options：监听的属性
	var options = { attributes: true, childList: false,subtree:false,attributeOldValue:true};
	var mutationObserver = new MutationObserver(function(mutationsList, observer){
		for(var mutation of mutationsList) {
			var This=mutation.target;
			var tag=This.tagName.toLowerCase();
			if (mutation.type === 'attributes' && config.define[tag].props[mutation.attributeName]!=null) {
				__initDomSetting(config,This,tag); 
				// console.log('The ' + mutation.attributeName + ' attribute was modified.');
				// console.log(JSON.stringify(mutation))
			}
		}
	});
	__initDomSetting(config,This,tag); 
	mutationObserver.observe(This, options);
}
//监控现存所有布局dom
function __observeLayout(config){
	for(var tag in config.define){
		var elements=document.getElementsByTagName(tag);
		for(var i=0;i<elements.length;i++){
			var This=elements[i];
			__observeLayoutDom(config,This,tag);
		}
	}
}
function __initLayoutSetting(config){
	//首次加载全局监控
	__observeLayout(config);
	
	function traversal(dom){
		var len = dom.length;
		var This = null;
		for(var i=0; i<len; i++){
		   This = dom[i];
		   console.log(This.tagName)
		   if(This.tagName!=null&&config.define[This.tagName.toLowerCase()]!=null){
				__observeLayoutDom(config,This,This.tagName.toLowerCase())
		   }
		   if(This.children){
			  traversal(This.children);
		   }
		}
	}
	
	// 选择需要观察变动的节点
	var ptargetNode = document.body; 
	// 观察器的配置（需要观察什么变动）
	var pconfig = { attributes: false, childList: true, subtree: true };
	// 当观察到变动时执行的回调函数
	var pcallback = function(mutationsList, observer) {
	    // Use traditional 'for loops' for IE 11
	    for(var mutation of mutationsList) {
	        if (mutation.type === 'childList') {
				var addNodes=mutation.addedNodes;
				traversal(addNodes);
	        }
	    }
	};
	// 创建一个观察器实例并传入回调函数
	var pobserver = new MutationObserver(pcallback);
	// 以上述配置开始观察目标节点
	pobserver.observe(ptargetNode, pconfig);
	
}
function __addLoadEvent(func){  
    var oldonload = window.onload; //把现在有window.onload事件处理函数的值存入变量oldonload。  
    if(typeof window.onload != 'function'){ //如果这个处理函数还没有绑定任何函数，就像平时那样把新函数添加给它  
        window.onload = func;  
    }else{ //如果在这个处理函数上已经绑定了一些函数。就把新函数追加到现有指令的末尾  
        window.onload = function(){  
            oldonload();  
            func();  
        }  
    }  
  
}
__initLayoutCSS(__layoutConfig);
window.addEventListener("load", function(){
	__initLayoutSetting(__layoutConfig)
}, false);


